import { defineConfig } from 'vite-plugin-windicss';

export default defineConfig({
  /**
   * @description 当开发服务端/构建过程中 当开发服务器/构建过程开始时，Windi CSS 将扫描您的源代码并提取实用程序用法。默认情况下，它将扫描src/扩展名为vue, html, mdx, pug, jsx, tsx.
   * 如果要启用/禁用对其他文件类型或位置的扫描, 可以使用 include 和 exclude 选项进行配置
   * @see https://windicss.org/guide/extractions.html#extractions
   */
  extract: {
    include: [
      '**/*.md',
      ".vitepress/theme/*.(md, vue)",
      '.vitepress/@slidev/theme-default/layouts/*.vue',
      '.vitepress/@slidev/client/layouts/*.vue',
      '.vitepress/@slidev/client/internals/SlideContainer.vue',
    ]
  },
  /**
   * @description 属性模式
   * @see https://windicss.org/posts/v30.html#attributify-mode
   */
  attributify: true,
  /**
   * @description 可复用类名样式，（便捷样式），当您多次使用同一组类名时，这是很常见的。我们提供了这个“快捷方式”功能，
   * 允许您提供实用类名的组合，您可以在应用程序内的任何地方使用它们，而无需复制自己。
   * @see https://windicss.org/features/shortcuts.html
   */
  shortcuts: {
    'bg-main': 'bg-white dark:bg-[#111]',
  },
  /**
   * @description 定制样式的主题
   * @see 暂无在文档中找到对应的解释，只有在vite选项中有出现用法，这里完全看命名来推测使用
   */
  theme: {
    extend: {
      colors: {
        primary: {
          DEFAULT: '#3AB9D4',
          deep: '#2082A6',
        },
        fontFamily: {
          mono: "'IBM Plex Mono', source-code-pro, Menlo, Monaco, Consolas, 'Courier New', monospace",
        },
      }
    }
  }
})